<template>
  <div>
    <el-drawer :withHeader="false" :visible.sync="dialog" :before-close="cancelForm" direction="rtl"
               :with-header="false" ref="drawer"
               size="900px">
      <div style="margin:30px">
        <el-row :gutter="24" class="myRow">
          <el-col :span="6">
            <span class="title">所属项目:</span>
            <span class="content">{{ data.projectName }}</span>
          </el-col>
          <el-col :span="8">
            <span class="title">所属模块:</span>
            <span class="content">{{ data.lv1ModuleName }}/{{ data.lv2ModuleName }}</span>
          </el-col>
          <el-col :span="8">
            <span class="title">对应任务:</span>
            <span class="content">{{ data.taskName }}</span>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="myRow">
          <el-col :span="6">
            <span class="title">责任人员:</span>
            <span class="content">{{ data.respPersonName }}</span>
          </el-col>
          <el-col :span="8">
            <span class="title">修改人员:</span>
            <span class="content">{{ data.devPersonName }}</span>
          </el-col>
          <el-col :span="8">
            <span class="title">测试人员:</span>
            <span class="content">{{ data.testPersonName }}</span>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="myRow">
          <el-col :span="6">
            <span class="title">问题类型:</span>
            <span class="content">{{ data.questionTypeName }}</span>
          </el-col>
          <el-col :span="8">
            <span class="title">测试环境:</span>
            <span class="content">{{ data.codeRepositoryName }}</span>
          </el-col>
          <el-col :span="8">
            <span class="title">预计修复:</span>
            <span class="content">{{ data.preRepair }}</span>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="myRow">
          <el-col :span="24">
            <span class="title">问题描述:</span>
            <span class="content">{{ data.describe }}</span>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="myRow">
          <el-col :span="24">
            <span class="title">备注:</span>
            <span class="content">{{ data.remarks }}</span>
          </el-col>
        </el-row>
        <el-divider>自测图片</el-divider>
        <el-row :gutter="24">
          <el-col :span="24">
            <el-upload
              :action=attachmentsUpload
              list-type="picture-card"
              :file-list="form.fileList"
              :data="form.upload"
              :limit="4"
              :headers="form.headers"
              :on-success="uploadSuccess"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove">
              <i class="el-icon-plus"></i>
            </el-upload>
            <!-- 展示图片 -->
            <el-dialog :visible.sync="diaVis" :append-to-body="true">
              <img width="100%" :src="form.dialogImageUrl" alt="">
            </el-dialog>
          </el-col>
        </el-row>
        <div style="float:right;margin-right:10px" v-show="isView">
          <el-button @click="cancelForm">取 消</el-button>
          <el-button type="primary" @click="submitForm()" :loading="loading">
            {{ loading ? '提交中...' : '确 定' }}
          </el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth'
import { testSelf } from '@/api/test'
import { mapGetters } from 'vuex'

export default {
  props: ['user_id'],
  name: 'PopVue',
  comments: {},
  computed: {
    ...mapGetters([
      'attachmentsLocal',
      'attachmentsUpload'
    ])
  },
  data() {
    return {
      data: {},
      diaVis: false,
      isView: false,
      dialog: false,
      loading: false,
      flag: true,
      key: 1,
      versionList: [],
      projectList: [],
      baseProjectList: [],
      userList: [],
      devUserList: [],
      testUserList: [],
      moduleList: [],
      taskList: [],
      disabled: false,
      peType: [
        { id: 0, value: '样式bug' },
        { id: 1, value: '程序bug' },
        { id: 2, value: '接口问题' },
        { id: 3, value: '页面优化' },
        { id: 5, value: '未知' }
      ],
      form: {
        upload: { tempCode: '' },
        uploadFileList: [],
        fileList: [],
        headers: { Authorization: getToken() }
      }
    }
  },
  methods: {
    init(row) {
      this.data = row
      this.editShowView(row)
      let date = new Date()
      this.form.upload.tempCode = 'TMP' + date.getFullYear() + date.getMonth() + date.getDate() + date.getHours()
        + date.getMinutes() + date.getSeconds() + Math.round(Math.random() * 1000)
    },
    uploadSuccess(response, file) {
      this.form.uploadFileList.push({
        name: file.response,
        fileName: file.response,
        type: 1,
        url: this.attachmentsUpload + file.response
      })
    },
    handleRemove(file) {
      if (typeof (file.type) == 'undefined') {
        for (let i = 0; i < this.form.uploadFileList.length; i++) {
          if (this.form.uploadFileList[i].fileName === file.response) {
            this.form.uploadFileList.splice(i, 1)
          }
        }
      } else {
        for (let i = 0; i < this.form.uploadFileList.length; i++) {
          if (this.form.uploadFileList[i].fileName === file.fileName) {
            this.form.uploadFileList[i].type = 2
          }
        }
      }
    },
    handlePictureCardPreview(file) {
      this.form.dialogImageUrl = file.url
      this.diaVis = true
    },
    handleAvatarSuccess(res, file) {
    },
    addNewClick(row) {
      this.flag = true
      this.dialog = true
      this.fileList = []
      this.uploadFileList = []
      this.clear()
      this.getParentData()
      this.projectList.length > 0 ? this.form.projectName = this.projectList[0].projectList[0].projectName : console.log('项目列表为空，请先维护项目')
      this.form.group = row.groupId
      this.form.projectId = row.projectId
      this.getProjectId()
      this.form.moduleId = [row.lv1ModuleId, row.lv2ModuleId]
      this.getModuleId(this.form.moduleId)
      this.form.taskId = row.relateId
      this.getTaskId(this.form.taskId)
      this.form.testPerson = row.testPerson
      this.form.relateId = row.relateId
      let date = new Date()
      this.form.upload.tempCode = 'TMP' + date.getFullYear() + date.getMonth() + date.getDate() + date.getHours() + date.getMinutes() + date.getSeconds() + Math.round(Math.random() * 1000)
      this.isView = true
      this.form.isBack = row.status === 5 ? 1 : 0

    },
    editShowView(row) {
      this.isView = true
      this.dialog = true
      this.form.fileList = []
      this.form.uploadFileList = []
      if (row.attachments != null) {
        row.attachments.forEach(a => {
          if (a.atType === 1) {
            this.form.fileList.push({
              id: a.id,
              name: a.fileName,
              fileName:
              a.fileName,
              url: this.attachmentsLocal + a.fileName,
              type: a.type
            })
          }
        })
        this.form.uploadFileList = JSON.parse(JSON.stringify(this.form.fileList))
      }
    },
    clear() {
      this.key++
      this.form.peId = ''
      this.form.group = ''
      this.form.projectId = ''
      this.form.taskId = ''
      this.form.moduleId = []
      this.form.respPerson = ''
      this.form.testPerson = ''
      this.form.devPersion = ''
      this.taskList = []
      this.moduleList = []
      this.form.peType = ''
      this.form.preRepair = ''
      this.form.preOnline = ''
      this.form.describe = ''
      this.form.upload.tempCode = ''
      this.form.code = ''
      this.form.remarks = ''
      this.form.fileList = []
      this.form.uploadFileList = []
    },
    submitForm() {
      if (this.form.uploadFileList.length === 0) {
        alert('请上传自测图片')
        return
      }
      this.loading = true
      this.disabled = true
      const d = {
        tid: this.data.tid,
        tempCode: this.form.upload.tempCode
      }
      this.sleep(800).then(_ => {
        testSelf(d).then(response => {
          if (typeof response === 'string') {
            let r = parseInt(response)
          }

            if (response === 4000) {
              return
            }
            this.$message({
              message: '提交成功',
              type: 'success'
            })
            this.loading = false
            this.disabled = false
            this.dialog = false
            this.$parent.$parent.handleClickSearch()
            this.clear()
          }
        )
      })
    },
    sleep(time) {
      return new Promise((resolve) => {
        setTimeout(resolve, time)
      })
    },
    cancelForm() {
      this.loading = false
      this.dialog = false
    }
  }
}

</script>

<style>
.title {
  font-size: 14px;
  font-weight: bold;
  color: #606266;
  margin-top: 20px;
}

.content {
  font-size: 18px;
  /*font-weight: bold;*/
  color: #222222;
  /*text-decoration:underline;*/
  margin-left: 15px;
  margin-top: 20px;
}

.myRow {
  margin-top: 20px;
  margin-left: 20px;
}

.el-form-item__content {
  margin-left: 0 !important;
}

.form-inputA {
  width: 798px;
}

.form-inputB {
  width: 178px;
}

.el-col.el-col-8 {
  width: 310px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 110px;
  height: 110px;
  line-height: 55px;
  text-align: center;
}

.avatar {
  width: 110px;
  height: 110px;
  display: block;
}

.el-upload-list__item {
  margin-bottom: 0 !important;
}
</style>
